<template>
  <div>
    <div class="nav">
      <hy-search
        class="search_box"
        ref="query"
        :searchTitle="searchTitle"
        v-model="searcher"
        :col="6"
        @search="getwageslist(0)"
      ></hy-search>
      <!-- :buttonText="{btnNameBy3:'新增薪资'}"
         @clickbybtn3="salaryAudit()"
             :button="{btnShowBy3:true}"    
      -->
    </div>
    <div id="table_container">
      <template>
        <el-table :data="tableData" style="width: 100%" height="631" stripe>
          <el-table-column prop="xuhao" label="序号" align="center" width="100"></el-table-column>
          <el-table-column prop="nubmer" label="人数" align="center"></el-table-column>
          <el-table-column prop="money" label="总薪资（元）" align="center"></el-table-column>
          <el-table-column prop label="总绩效（元）" align="center"></el-table-column>
          <el-table-column prop label="总基本工资（元）" align="center"></el-table-column>
          <el-table-column prop label="总扣款（元）" align="center"></el-table-column>
          <el-table-column prop="state" label="状态" align="center"></el-table-column>
          <el-table-column prop="f" label="操作" align="center">
            <el-row slot-scope="scope">
              <el-button
                size="mini"
                type="warning"
                @click="xq(1,2,depart=scope.row.depart,yeardate=scope.row.yeardate)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="primary"
                @click="xq(0,2,depart=scope.row.depart,yeardate=scope.row.yeardate)"
              >详情</el-button>
            </el-row>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      total: 1,
      current: 1,
      pagesize: 11,
      formInline: {},
      tableData: [],
      searcher: {
        customProductName: "",
        customProductNo: "",
        issuanceDate: ""
      },
      searchTitle: [
        {
          type: "input",
          name: "customProductName",
          label: "输入搜索",
          placeholder: "请输入总基本工资",
          prop: "customProductName"
        },
        {
          type: "date2",
          name: "issuanceDate",
          label: "输入时间",
          placeholder: "请选择输入时间",
          prop: "issuanceDate"
        }
      ]
    };
  },
  created() {
    this.getwageslist(0);
  },
  methods: {
    // 分页
    handleCurrentChange(e) {
      this.getwageslist(e - 1);
    },
    //详情
    xq(state1, state2, depart, yeardate) {
      this.$router.push({
        path: "/Payroll",
        query: {
          state1: state1,
          state2: state2,
          depart: depart,
          yeardate: yeardate
        }
      });
    },
    //列表数据
    getwageslist(page) {
      let arr = {
        pn: page,
        PerPageSize: 11,
        key: this.searcher.customProductName
          ? this.searcher.customProductName
          : "",
        start: this.searcher.issuanceDate[0]
          ? this.searcher.issuanceDate[0]
          : "",
        end: this.searcher.issuanceDate[1] ? this.searcher.issuanceDate[1] : ""
      };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/PersonnelManagement.asmx/SalaryManlst?index=1&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        this.total = data3.total;
        var val = [];
        data3.lstall.forEach(item => {
          val.push(item);
        });
        this.tableData = val;
        for (var i = 0; i < this.tableData.length; i++) {
          var dd = new Date(parseInt(this.tableData[i].yeardate.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.tableData[i].yeardate = y + "-" + m + "-" + d + " ";
          this.tableData[i].xuhao = 1 + i + 11 * page;
        }
      });
    },
    salaryAudit() {
      this.$router.push("/PayollAdd");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.nav {
  background: $white;
  height: 50px;
  margin-top: 10px;
  width: 98%;
  padding: 0 1%;
  .search_box {
    width: 98%;
    padding-top: 5px;
  }
}
.block {
  text-align: center;
  margin-top: 10px;
}
#table_container {
  width: 98%;
  margin-top: 10px;
  padding: 0 1%;
  background: $white;
}
</style>
<style>
/* #table_container .el-table th {
  background: #efedf4;
} */
#table_container .el-pagination {
  text-align: center;
}
</style>